<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :inline="true" :model="queryParams">
        <el-row>
          <el-col :span="8">
            <el-form-item label="运输任务编号:" prop="transportTaskId">
              <el-input
                v-model="queryParams.transportTaskId"
                placeholder="请输入运输任务编号"
                clearable
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="102px" label="起始地机构: " prop="startAgencyId">
              <tree-select
                :id.sync="queryParams.startAgencyId"
                v-model="valueStart"
                style="width: 260px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="102px" label="目的地机构: " prop="endAgencyId">
              <tree-select
                :id.sync="queryParams.endAgencyId"
                v-model="valueEnd"
                style="width: 260px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="回车时间:"
              label-width="102px"
              prop="intoStorage"
            >
              <el-date-picker
                v-model="intoStorage"
                style="width: 280px"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用:" prop="isAvailable">
              <el-input
                v-model="queryParams.isAvailable"
                placeholder="请选择"
                clearable
                style="width: 260px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              <el-button
                class="button"
                type="primary"
                @click="search"
              >搜索</el-button>
              <el-button class="button" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px;">
      <el-table v-loading="loading" stripe :data="tableData" style="width: 100%">
        <el-table-column
          prop="transportTaskId"
          label="运输任务编号"
          width="200"
        />
        <el-table-column
          prop="startAgencyName"
          label="起始地机构"
          width="180"
        />
        <el-table-column prop="endAgencyName" label="目的地机构" width="180" />
        <el-table-column
          prop="transportOrderNumber"
          label="运单数量"
          width="120"
        />
        <el-table-column prop="outStorageTime" label="出车时间" width="160" />
        <el-table-column prop="intoStorageTime" label="回车时间" width="160" />
        <el-table-column prop="licensePlate" label="车牌号" width="160" />
        <el-table-column
          prop="isAvailable"
          align="left"
          label="车辆是否可用"
          min-width="120"
        >
          <template slot-scope="scope">
            <div
              class="tableColumn-status"
              :class="{ 'stop-use': !scope.row.isAvailable }"
            >
              {{ String(scope.row.isAvailable) ? "可用" : "不可用" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="queryParams.pageSize"
          :current-page="queryParams.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCarBackList } from '@/api/car'
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      valueStart: '',
      valueEnd: '',
      intoStorage: [],
      loading: false // 加载
    }
  },
  created() {
    this.getCarBackList()
  },
  methods: {
    async getCarBackList() {
      this.loading = true
      const res = await getCarBackList(this.queryParams)
      console.log(res)
      this.tableData = res.items
      this.total = Number(res.counts)
      this.loading = false
    },
    search() {
      this.queryParams.page = 1
      if (this.intoStorage?.length) {
        this.queryParams.intoStorageEndTime = this.intoStorage[1]
        this.queryParams.intoStorageStartTime = this.intoStorage[0]
      } else {
        this.queryParams.intoStorageEndTime = ''
        this.queryParams.intoStorageStartTime = ''
      }
      this.getCarBackList()
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.intoStorage = []
      this.queryParams.intoStorageEndTime = ''
      this.queryParams.intoStorageStartTime = ''
      this.getCarBackList()
    },
    // 获取最新页码
    handleCurrentChange(newPage) {
      this.queryParams.page = newPage
      this.getCarBackList()
    },
    // 查看按钮
    handleClick(id) {
      console.log(id)
      this.$router.push({
        path: '/car/backListLook',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .button {
    width: 86px;
  }
  :deep(.el-table) {
    border: 1px solid #ebeef5;
    .el-table__header th {
      background-color: #f8faff;
      &:nth-child(1) {
        .cell {
          padding-left: 20px;
        }
      }
    }
    .el-button--text{
      color: #419eff;
    }
    .el-table__row td {
      color: #20232a;
      font-size: 13px;
      &:nth-child(1) {
        .cell {
          padding-left: 20px;
        }
      }
    }
    // 底部拖动轴
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: 4px solid #fff;
        background-color: #dddee0;
      }
    }
  }
  .el-pagination {
    font-size: 18px;
    margin: 20px;
  }
}
</style>
